<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>element入门案例</title>
    <!-- 1.导入vue -->
    <script src="../js/vue.js"></script>
    <!-- 2.导入element的index.js文件 -->
    <script src="../element-ui/lib/index.js"></script>
    <!-- 3.导入element的css样式文件 -->
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">


</head>
<body>
<!-- 视图 -->
<div id="app">
    <el-row>
        <el-button>默认按钮</el-button>
        <el-button v-on:click="onSubmit1" type="primary">充值10次</el-button>
        <el-button  v-on:click="onSubmit2"  type="success">充值20次</el-button>
        <el-button  v-on:click="onSubmit3"  type="info">充值50次</el-button>
    </el-row>

    <!-- <el-row>
         <el-button plain>朴素按钮</el-button>
         <el-button type="primary" plain>主要按钮</el-button>
         <el-button type="success" plain>成功按钮</el-button>
         <el-button type="info" plain>信息按钮</el-button>
         <el-button type="warning" plain>警告按钮</el-button>
         <el-button type="danger" plain>危险按钮</el-button>
     </el-row>

     <el-row>
         <el-button round>圆角按钮</el-button>
         <el-button type="primary" round>主要按钮</el-button>
         <el-button type="success" round>成功按钮</el-button>
         <el-button type="info" round>信息按钮</el-button>
         <el-button type="warning" round>警告按钮</el-button>
         <el-button type="danger" round>危险按钮</el-button>
     </el-row>

     <el-row>
         <el-button icon="el-icon-search" circle></el-button>
         <el-button type="primary" icon="el-icon-edit" circle></el-button>
         <el-button type="success" icon="el-icon-check" circle></el-button>
         <el-button type="info" icon="el-icon-message" circle></el-button>
         <el-button type="warning" icon="el-icon-star-off" circle></el-button>
         <el-button type="danger" icon="el-icon-delete" circle></el-button>
     </el-row>-->
</div>

<!-- 模型 -->
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            count1:10,
            count2:20,
            count3:50,
        }

        ,
        methods: {
            onSubmit1(formName) {
                //后台访问服务器
                axios.post("/userTopUp/",this.count1).then(resp => {
                    //获取返回的resultInfo对象
                    let resultInfo = resp.data;
                  /*  //success后面没有括号
                    if (resultInfo.success) {
                        //登录成功跳转到pages/address.html
                        location.href = "/pages/TopUp.html";
                    } else {
                        //显示服务器返回的信息
                        this.$message.error(resultInfo.message);
                    }*/
                });
            },
            onSubmit2(formName) {
                axios.post("/userTopUp/",this.count2).then(resp => {
                    //获取返回的resultInfo对象
                    let resultInfo = resp.data;
                });
            },
            onSubmit3(formName) {
                axios.post("/userTopUp/",this.count3).then(resp => {
                    //获取返回的resultInfo对象
                    let resultInfo = resp.data;
                });
            }
        }


    });
</script>
</body>
</html>